/// <reference path="../devextreme/ts/jquery.d.ts" />
/// <reference path="../devextreme/ts/dx.all.d.ts" />

($ => {
    class QuickFilter {
        constructor(options) {
            this.options = options || {};

            const { ele, url, onNodeSelected, ...rest } = this.options;

            this.ele = ele;
            this.url = url;
            this.onNodeSelected = onNodeSelected;
            this.restOptions = rest;

            this.init();
        }

        init() {
            const treeViewOptions = {
                keyExpr: 'id',
                parentIdExpr: 'parentId',
                displayExpr: 'text',
                dataStructure: 'plain',
                selectedExpr: 'selected',
                selectionMode: 'single',
                animationEnabled: false,
                focusStateEnabled: false,
                height: 0,
                onItemClick: e => {
                    if (!e.itemData.isDirectory) {
                        this.treeView.selectItem(e.itemData.id);
                        this.selectedNodeKey = e.itemData.id;
                        if (this.onNodeSelected) {
                            this.onNodeSelected(e.itemData.id);
                        }
                    }
                    else {
                        if (e.node.expanded) {
                            e.component.collapseItem(e.node.key);
                        } else {
                            e.component.expandItem(e.node.key);
                        }
                    }
                },
            };

            const $ele = $(this.ele).css({ display: 'flex', flexDirection: 'column' });
            const $treeView = $('<div />').dxTreeView(treeViewOptions).css({ flex: 'auto' });

            $ele.append(this.createToolbar());
            $ele.append($treeView);

            this.treeView = $treeView.dxTreeView('instance');
            this.refresh();
        }

        createToolbar() {
            const $toolbar = $('<div style="border-bottom: 1px solid #eee"/>').dxToolbar({
                items: [
                    {
                        location: 'before',
                        widget: 'dxButton',
                        options: {
                            text: '展开',
                            icon: '/icons/Expand.svg',
                            focusStateEnabled: false,
                            onClick: this.expandAll.bind(this),
                        },
                    },
                    {
                        location: 'before',
                        widget: 'dxButton',
                        options: {
                            text: '折叠',
                            icon: '/icons/Collapse.svg',
                            focusStateEnabled: false,
                            onClick: this.collapseAll.bind(this),
                        },
                    },
                    {
                        location: 'before',
                        widget: 'dxButton',
                        options: {
                            text: '刷新',
                            icon: 'refresh',
                            focusStateEnabled: false,
                            onClick: this.refresh.bind(this),
                        },
                    },
                ],
            });

            $toolbar.find('.dx-toolbar-items-container').css({
                height: '36px',
            });

            return $toolbar;
        }

        expandAll() {
            this.treeView.expandAll();
        }

        collapseAll() {
            this.treeView.collapseAll();
        }

        refresh() {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: this.url,
                success: result => {
                    const data = (result.data ?? []).map(item => {
                        if (item.isDirectory) {
                            item.icon = 'folder';
                        } else {
                            item.icon = 'file';
                        }
                        return item;
                    });
                    this.treeView.option('items', data);
                    let selectedNodes = this.treeView.getSelectedNodes();
                    if (selectedNodes.length > 0) {
                        if (selectedNodes[0].parent?.key) {
                            this.treeView.expandItem(selectedNodes[0].parent.key);
                        }
                        if (this.onNodeSelected) {
                            this.onNodeSelected(selectedNodes[0].key);
                        }
                    }
                },
                error: () => {
                    DevExpress.ui.notify('加载快速过滤失败', 'error');
                },
                ...this.restOptions,
            });
        }
        selectedNodeKey() {
            return this.selectedNodeKey;
        }
    }

    $.fn.quickFilter = function (url, onNodeSelected, options) {
        const quickFilter = new QuickFilter({
            ele: this[0],
            url,
            onNodeSelected,
            ...options,
        });
        return {
            expandAll: quickFilter.expandAll.bind(quickFilter),
            collapseAll: quickFilter.collapseAll.bind(quickFilter),
            refresh: quickFilter.refresh.bind(quickFilter),
            selectedNodeKey: quickFilter.selectedNodeKey.bind(quickFilter),
        };
    };
})(jQuery);
